<template>
	<div class="rightcomtsdiv commdiv">
		<!-- 右上 -->
		<div class="right_top">
			<div class="comtitle">安全预警统计</div>
			<div class="comtitlejiao">
				<div class="right_topout">
					<div class="right_top_light">
						<span>安全防护天数</span>
						<span>{{ rtDate1.safetyWarnTotalDay }}</span>
						<img src="/@/assets/images/rtl.png" alt="" />
					</div>
					<div class="caihengxian"><img src="/@/assets/images/caihengxian.svg" alt="" /></div>
					<div class="right_top_right">
						<div class="rtr_top">
							<div class="rtr_topdiv">
								<img src="/@/assets/images/rttt.png" alt="" />
								<div class="rtr_topdiv_bot">
									<p>
										<span>安全预警次数</span> <span>{{ rtDate1.safetyWarnTotalNum }}</span>
									</p>
									<p>
										<span>今日 {{ rtDate1.safetyTodayNum }}</span><a-divider type="vertical"
											style="height: 17px; border-color: #e09f31" dashed />
										<span>近30日 {{ rtDate1.safety30DayNum }}</span>
									</p>
								</div>
							</div>
						</div>
						<div class="rtr_bottom">
							<div class="rtr_topdiv">
								<img src="/@/assets/images/rtttom.png" alt="" />
								<div class="rtr_topdiv_bot">
									<p>
										<span>安全防护次数</span> <span>{{ rtDate1.safetyProtectTotalNum }}</span>
									</p>
									<p>
										<span>今日 {{ rtDate1.safetyProtectTodayNum }}</span><a-divider type="vertical"
											style="height: 17px; border-color: #e09f31" dashed />
										<span>近30日 {{ rtDate1.safetyProtect30DayNum }}</span>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 右中 -->
		<div class="right_center">
			<div class="comtitle">最新预警信息</div>
			<div class="comtitlejiao">
				<div class="right_centerout">
					<div class="right_center_top">
						<div class="right_center_top_ones">
							<img src="/@/assets/images/u470.png" alt="" />
							<div class="right_center_top_ones_right">
								<span>高风险</span>
								<span>{{ rtDate2.highWarnNum }}</span>
							</div>
						</div>
						<div class="right_center_top_ones">
							<img src="/@/assets/images/u474.png" alt="" />
							<div class="right_center_top_ones_right">
								<span>中风险</span>
								<span style="color: rgb(223, 147, 76)">{{ rtDate2.middleWarnNum }}</span>
							</div>
						</div>
						<div class="right_center_top_ones">
							<img src="/@/assets/images/u478.png" alt="" />
							<div class="right_center_top_ones_right">
								<span>低风险</span>
								<span style="color: rgb(111, 163, 201)">{{ rtDate2.lowWarnNum }}</span>
							</div>
						</div>
					</div>
					<div class="right_center_center">
						<div v-show="index < 3" class="right_center_center_ones"
							v-for="(item, index) in rtDate2.warnList" :key="item.vin">
							<p class="right_center_center_onesp1">
								<span>{{ item.createTime.split(' ')[0] }}</span>
								<span>
									<a-tooltip>
										<template #title>{{ item.stationName }}({{ item.stakeName }})</template>
										{{ item.stationName }}({{ item.stakeName }})
									</a-tooltip>
								</span>
								<span style="background-color: #2e5982" v-if="item.level == 1">低风险</span>
								<span style="background-color: #574739" v-if="item.level == 2">中风险</span>
								<span style="background-color: #5c3240" v-if="item.level == 3">高风险</span>
							</p>
							<div class="right_center_center_onesp2">
								<div>
									<span>预警原因:</span> <span>{{ item.warnCnName }}</span>
								</div>
								<a-divider type="vertical" style="height: 11px; border-color: #9198a2" />
								<div>
									<span>VIN:</span>
									<span>{{ item.vin }}</span>
								</div>
							</div>
						</div>
					</div>
					<p class="right_center_bottom" @click="gourl">全部预警<a-icon type="right" /></p>
				</div>
			</div>
		</div>
		<!-- 右下 -->
		<div class="right_bottom">
			<div class="comtitle">预警趋势分析</div>
			<div class="comtitlejiao">
				<div class="right_bottomout">
					<div class="rt_bmot_top">
						<p>
							<span class="rt_bmot_top_sp1">预警次数</span>
							<span class="rt_bmot_top_sp2"><span :class="{ selectname: typetime == 0 }"
									@click="typetimefunt(0)">近30天</span> <span :class="{ selectname: typetime == 1 }"
									@click="typetimefunt(1)">近12月</span> </span>
						</p>
					</div>
					<div class="rt_bmot_bottom">
						<!-- <div id="rt_bmot_bottom_echarts" :style="{ width: '100%', height: '182rem' }"></div> -->
						<graphic :graphicData="graphicData"></graphic>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script name="rightcomts" setup>
import graphic from './graphic.vue';
// 获取props
const props = defineProps({
	rightdata: { type: Object, default: () => { } },
});
const rtDate1 = ref({});
const rtDate2 = ref({});
const graphicData = ref({});
const typetime = ref(0);
const ctlineEchartsData = ref([]);

const newVal = ref({});
watch(
	() => props.rightdata,
	(newrightdata) => {
		newrightdata &&
			nextTick(() => {
				rtDate1.value = newrightdata.safetyWarnVO;
				rtDate2.value = newrightdata.currentWarnVO;
				newVal.value = newrightdata;
				graphicData.value = newrightdata.allWarnCurveVO.oneMonth;
			});
	},
	{ immediate: true, deep: true }
);
function typetimefunt(num) {
	typetime.value = num;
	switch (num) {
		case 0:
			graphicData.value = newVal.value.allWarnCurveVO.oneMonth;
			break;
		case 1:
			graphicData.value = newVal.value.allWarnCurveVO.oneYear;
			break;
	}
}
import { router } from '/@/router';

function gourl() {
	router.push({
		path: '/warningProtection/BizWarningInfo',
	});
}

onMounted(() => {
	// getsafetyWarnApi();
	// graphicData.value = props.rightdata.allWarnCurveVO.oneMonth;
	// console.log('onMounted--onMounted', graphicData.value);
});
</script>
<style lang="less" scoped>
@import '/@/assets/css/baseinit.css';

.selectname {
	background-image: url(@/assets/images/jsc/u135.svg);
}

.rightcomtsdiv {
	// width: 388px;
	// height: 100vh;
	// border: 1px white solid;
	display: flex;
	height: calc(100% - 36px);
	flex-direction: column;
	justify-content: space-between;

	//右上
	.right_top {
		.right_topout {
			display: flex;
			justify-content: start;
			height: 170px;
			align-items: center;
			width: 100%;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20px;
			position: relative;

			.right_top_light {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 102px;
				justify-content: space-around;
				height: 100%;

				span:nth-of-type(1) {
					font-weight: 300;
					font-style: normal;
					color: rgb(125, 133, 144);
					font-size: 14px;
				}

				span:nth-of-type(2) {
					font-weight: 400;
					font-style: normal;
					font-size: 28px;
					color: rgb(255, 255, 255);
				}

				img {
					width: 69px;
					height: 68px;
				}
			}

			.caihengxian {
				transform: rotate(90deg);
				width: 137px;
				height: 1px;
				position: absolute;
				left: 50%;
				margin-left: -134px;
			}

			.right_top_right {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				height: 100%;

				.rtr_top,
				.rtr_bottom {
					.rtr_topdiv {
						display: flex;
						align-items: center;
						// justify-content: space-around;

						img {
							width: 51px;
							height: 47px;
						}
					}

					.rtr_topdiv_bot {
						margin-left: 15px;

						p:nth-of-type(1) {
							display: flex;
							justify-content: space-between;

							span:nth-of-type(1) {
								font-weight: 300;
								font-style: normal;
								font-size: 16px;
								color: rgb(125, 133, 144);
							}

							span:nth-of-type(2) {
								font-weight: 700;
								font-style: normal;
								font-size: 20px;
								color: rgb(255, 255, 255);
								margin-left: 6px;
							}
						}

						p:nth-of-type(2) {
							color: rgb(224, 159, 49);
							font-size: 16px;
							margin-top: 9px;

							span:nth-of-type(1) {
								color: rgb(224, 159, 49);
								font-size: 16px;
							}

							span:nth-of-type(2) {
								color: rgb(224, 159, 49);
								color: rgb(224, 159, 49);
								font-size: 16px;
							}
						}
					}
				}
			}

			.rtr_bottom {}
		}
	}

	// 右中
	.right_center {
		.right_centerout {
			box-sizing: border-box;
			padding: 20px;

			.right_center_top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.right_center_top_ones {
					display: flex;
					align-items: center;

					img {
						width: 41px;
						height: 48px;
					}

					.right_center_top_ones_right {
						display: flex;
						margin-left: 10px;
						flex-direction: column;

						span:nth-of-type(1) {
							font-weight: 300;
							font-style: normal;
							color: rgb(125, 133, 144);
							font-size: 16px;
						}

						span:nth-of-type(2) {
							font-size: 13px;
							font-weight: 700;
							font-style: normal;
							font-size: 20px;
							color: rgb(219, 68, 77);
						}
					}
				}
			}

			.right_center_center {
				.right_center_center_ones {
					// height: 57px;
					border-bottom: 1px #1d3564 dashed;
					margin-top: 10px;

					&p1 {
						display: flex;
						justify-content: space-between;
						align-items: center;

						span:nth-of-type(1) {
							font-weight: 300;
							font-style: normal;
							font-size: 14px;
							color: rgb(125, 133, 144);
							line-height: 22px;
						}

						span:nth-of-type(2) {
							font-weight: 300;
							font-style: normal;
							color: rgb(70, 166, 255) !important;
							flex: 1;
							margin-left: 11px;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 16px;
						}

						span:nth-of-type(3) {
							width: 73px;
							height: 19px;
							font-weight: 300;
							font-style: normal;
							font-size: 14px;
							color: rgb(255, 255, 255);
							background: #5a3340;
							text-align: center;
							line-height: 19px;
							border-radius: 5px;
						}
					}

					&p2 {
						font-weight: 300;
						font-style: normal;
						font-size: 14px;
						color: #9198a2;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 9px;
						margin-bottom: 9px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;

					}
				}
			}

			.right_center_bottom {
				font-weight: 300;
				font-style: normal;
				font-size: 14px;
				color: rgb(70, 166, 255) !important;
				text-align: right;
				margin-top: 10px;
				cursor: pointer;
			}
		}
	}

	// 右下
	.right_bottom {
		height: 310px;

		.right_bottomout {
			box-sizing: border-box;
			padding: 20px;

			.rt_bmot_top {
				margin: 10px 0;

				p {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.rt_bmot_top_sp1 {
						font-weight: 300;
						font-style: normal;
						font-size: 12px;
						color: rgb(125, 133, 144);
					}

					.rt_bmot_top_sp2 {
						font-weight: 400;
						font-style: normal;
						color: rgb(70, 166, 255) !important;
						margin-left: 12px;
						cursor: pointer;

						span:nth-of-type(2) {
							padding-left: 20px;
						}
					}
				}
			}

			.rt_bmot_bottom {}
		}
	}
}
</style>
